<template>
    <v-container fluid>
        <v-card class="mt-5">
            <v-row>
                <v-col cols="4">
                    <v-list>
                        <v-list-item>
                            <v-avatar size="200" class="mx-auto">
                                <img
                                        src="https://cdn.vuetifyjs.com/images/john.jpg"
                                        alt="John"
                                >
                            </v-avatar>
                        </v-list-item>
                        <v-list-item>
                            <v-btn class="mx-auto mt-2">修改头像</v-btn>
                        </v-list-item>
                    </v-list>
                </v-col>
                <v-divider vertical/>
                <v-col>
                    <v-form
                            ref="form"
                            v-model="valid"
                            lazy-validation
                    >
                        <v-text-field
                                v-model="data.nickname"
                                :counter="20"
                                :rules="nameRules"
                                label="昵称"
                                required
                        ></v-text-field>

                        <v-select
                                v-model="data.sex"
                                :items="items"
                                item-value="index"
                                item-text="text"
                                :rules="[v => !!v || '该选项不得为空']"
                                label="性别"
                                required
                        ></v-select>

                        <v-dialog
                                ref="dialog"
                                v-model="modal"
                                :return-value.sync="data.birthday"
                                persistent
                                width="290px"
                        >
                            <template v-slot:activator="{ on, attrs }">
                                <v-text-field
                                        v-model="data.birthday"
                                        label="出生日期"
                                        prepend-icon="mdi-calendar"
                                        readonly
                                        v-bind="attrs"
                                        v-on="on"
                                ></v-text-field>
                            </template>
                            <v-date-picker
                                    v-model="data.birthday"
                                    scrollable
                                    locale="zh-cn"
                            >
                                <v-spacer></v-spacer>
                                <v-btn
                                        text
                                        color="primary"
                                        @click="modal = false"
                                >
                                    取消
                                </v-btn>
                                <v-btn
                                        text
                                        color="primary"
                                        @click="$refs.dialog.save(data.birthday)"
                                >
                                    确定
                                </v-btn>
                            </v-date-picker>
                        </v-dialog>
                        <v-text-field
                                v-model="data.phone"
                                label="手机号"
                                required
                        ></v-text-field>

                        <v-btn
                                :disabled="!valid"
                                color="success"
                                class="mr-4"
                                @click="update"
                        >
                            更新
                        </v-btn>
                    </v-form>
                </v-col>
            </v-row>
        </v-card>
    </v-container>
</template>

<script>
    import CwkDatePicker from '@/components/DatePicker.vue'

    export default {
        name: "User",
        components: {
            CwkDatePicker
        },
        data: () => ({
            message1: '',
            data: {
                nickname: '',
                sex: -1,
                phone: '',
                birthday: new Date().toISOString().substr(0, 10),
            },
            items: [
                {text: '未知', index: -1},
                {text: '女', index: 0},
                {text: '男', index: 1},
            ],
            modal: false,
            valid: true,
            nameRules: [
                v => !!v || 'Name is required',
                v => (v && v.length <= 20) || '名字长度请在20以内',
            ],
            phone: '',
            select: null,
        }),
        created() {
            this.initialize()
        },
        methods: {
            initialize() {
                this.$axios.get("user").then(response => {
                    this.data = response.data
                }).catch(error => {
                    console.log(error)
                })
            },
            update() {
            }
        }
    }
</script>

<style scoped>

</style>